<template>

	<div class="row">
		<span v-if="showTip">Welcome to search users of github</span>
		<span v-show="isLoading">Loading...</span>
		<span>{{errorMsg}}</span>
		<div class="card" v-for="user in this.users" :key="user.id">
			<a :href="user.html_url" target="_blank">
				<img :src="user.avatar_url" style='width: 100px' />
			</a>
			<p class="card-text">{{user.login}}</p>
		</div>

	</div>


</template>

<script>
	import axios from "axios"

	export default {
		name: 'Search',
		data() {
			return {
				users: [],
				showTip: true,
				isLoading: false,
				errorMsg: ""
			}
		},

		methods: {
			searchList(searchContent) {
				this.errorMsg = ""
				this.showTip = false
				this.isLoading = true
				axios.get("https://api.github.com/search/users?q=" + searchContent).then(
					response => {
						this.users = response.data.items
						this.isLoading = false
					},
					error => {
						console.log("请求失败:", error.message)
						this.isLoading = false
						this.errorMsg = error.message
					}
				)
			}
		},
		mounted() {
			this.$bus.$on("searchList", this.searchList)
		},
	}
</script>

<style scoped>
	.album {
		min-height: 50rem;
		/* Can be removed; just added for demo purposes */
		padding-top: 3rem;
		padding-bottom: 3rem;
		background-color: #f7f7f7;
	}

	.card {
		float: left;
		width: 33.333%;
		padding: .75rem;
		margin-bottom: 2rem;
		border: 1px solid #efefef;
		text-align: center;
	}

	.card>img {
		margin-bottom: .75rem;
		border-radius: 100px;
	}

	.card-text {
		font-size: 85%;
	}
</style>